 <template>
 	<view class="container">
 		<!-- 顶部蓝色区域 -->
 		<view class="header-section" :style="{ paddingTop: statusBarHeight + 'px' }">
 			<view class="welcome-text">
 				<view class="greeting">您好,</view>
 				<view class="welcome">欢迎登录车联网服务!</view>
 			</view>
 			<view class="header-illustration">
 				<image class="illustration-img" src="/static/image/ren.png" mode="aspectFit"></image>
 			</view>
 		</view>

 		<!-- 登录表单区域 -->
 		<view class="login-section">
 			<view class="input-row">
 				<input class="login-input" type="number" placeholder="手机号登陆" v-model="phone" maxlength="11" />
 			</view>
 			<view class="input-row">
 				<input class="login-input" type="number" placeholder="输入验证码" v-model="code" maxlength="6" />
 				<view class="code-btn" :class="{ disabled: countdown > 0 }" @click="getCode">
 					{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
 				</view>
 			</view>
 			<view class="login-btn" @click="handleLogin">登录</view>
 		</view>

 		<!-- 位置权限弹窗 -->
 		<view class="location-modal" v-if="showLocationModal">
 			<view class="modal-content" @click.stop>
 				<view class="modal-title">获取你的位置信息</view>
 				<view class="modal-desc">你的位置信息将用于获取你附近的站点</view>
 				<view class="modal-buttons">
 					<view class="modal-btn reject" @click="rejectLocation">拒绝</view>
 					<view class="modal-btn allow" @click="allowLocation">允许</view>
 				</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script setup>
 	import {
 		ref,
 		onMounted
 	} from 'vue';
 	import {
 		onLoad
 	} from '@dcloudio/uni-app';

 	const statusBarHeight = ref(0);
 	const phone = ref('');
 	const code = ref('');
 	const countdown = ref(0);
 	const showLocationModal = ref(true);

 	onMounted(() => {
 		const systemInfo = uni.getSystemInfoSync();
 		statusBarHeight.value = systemInfo.statusBarHeight;
 	});

 	const getCode = () => {
 		if (countdown.value > 0) return;
 		if (!phone.value || phone.value.length !== 11) {
 			uni.showToast({
 				title: '请输入正确的手机号',
 				icon: 'none'
 			});
 			return;
 		}
 		countdown.value = 60;
 		const timer = setInterval(() => {
 			countdown.value--;
 			if (countdown.value <= 0) clearInterval(timer);
 		}, 1000);
 		uni.showToast({
 			title: '验证码已发送'
 		});
 	};

 	const handleLogin = () => {
 		if (!phone.value || phone.value.length !== 11) {
 			uni.showToast({
 				title: '请输入正确的手机号',
 				icon: 'none'
 			});
 			return;
 		}
 		if (!code.value || code.value.length !== 6) {
 			uni.showToast({
 				title: '请输入验证码',
 				icon: 'none'
 			});
 			return;
 		}
 		uni.showToast({
 			title: '登录成功'
 		});
 		setTimeout(() => uni.switchTab({
 			url: '/pages/index/index'
 		}), 1500);
 	};

 	const hideLocationModal = () => {
 		showLocationModal.value = false;
 	};

 	const rejectLocation = () => {
 		showLocationModal.value = false;
 		uni.showToast({
 			title: '用户拒绝授权',
 			icon: 'error'
 		});
 	};
 	const allowLocation = () => {
 		uni.navigateTo({
 			url: '/pages/index/washCar/chooseAdress/chooseAdress'
 		})
 		showLocationModal.value = false;

 	};
 </script>

 <style scoped>
 	.container {
 		width: 100%;
 		height: 100vh;
 		display: flex;
 		flex-direction: column;
 		background-color: white;
 	}

 	.header-section {
 		width: 100%;
 		height: 55vh;
 		background: linear-gradient(135deg, #4A90E2 0%, #5AC8FA 100%);
 		position: relative;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-end;
 		padding: 0 20px 20px 20px;
 	}

 	.header-section::before {
 		content: '';
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M0,50 Q25,30 50,50 T100,50 L100,100 L0,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
 		background-size: cover;
 		opacity: 0.3;
 	}

 	.welcome-text {
 		z-index: 1;
 		margin-bottom: 20px;
 	}

 	.greeting {
 		font-size: 32px;
 		color: white;
 		font-weight: bold;
 		margin-bottom: 10px;
 	}

 	.welcome {
 		font-size: 16px;
 		color: white;
 	}

 	.header-illustration {
 		width: 180px;
 		height: 180px;
 		z-index: 1;
 		align-self: flex-end;
 		margin-bottom: -20px;
 	}

 	.illustration-img {
 		width: 100%;
 		height: 100%;
 	}

 	.login-section {
 		flex: 1;
 		background-color: white;
 		border-radius: 25px 25px 0 0;
 		padding: 40px 20px;
 		position: relative;
 		z-index: 2;
 	}

 	.input-row {
 		display: flex;
 		align-items: center;
 		border-bottom: 1px solid #E0E0E0;
 		padding: 15px 0;
 		margin-bottom: 20px;
 	}

 	.login-input {
 		flex: 1;
 		font-size: 16px;
 		color: #333;
 	}

 	.code-btn {
 		padding: 5px 15px;
 		background-color: #4A90E2;
 		color: white;
 		border-radius: 15px;
 		font-size: 14px;
 	}

 	.code-btn.disabled {
 		background-color: #CCCCCC;
 	}

 	.login-btn {
 		width: 100%;
 		height: 50px;
 		background-color: #4A90E2;
 		color: white;
 		border-radius: 25px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 18px;
 		font-weight: bold;
 		margin-top: 30px;
 	}

 	.location-modal {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background-color: rgba(0, 0, 0, 0.5);
 		display: flex;
 		align-items: flex-end;
 		z-index: 999;
 	}

 	.modal-content {
 		width: 100%;
 		background-color: white;
 		border-radius: 15px 15px 0 0;
 		padding: 25px 20px;
 	}

 	.modal-title {
 		font-size: 18px;
 		font-weight: bold;
 		color: #333;
 		margin-bottom: 10px;
 	}

 	.modal-desc {
 		font-size: 14px;
 		color: #666;
 		margin-bottom: 25px;
 		line-height: 1.6;
 	}

 	.modal-buttons {
 		display: flex;
 		gap: 15px;
 	}

 	.modal-btn {
 		flex: 1;
 		height: 45px;
 		border-radius: 8px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 16px;
 	}

 	.modal-btn.reject {
 		background-color: #F5F7FA;
 		color: #666;
 	}

 	.modal-btn.allow {
 		background-color: #4A90E2;
 		color: white;
 	}
 </style>